<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Music</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style type="text/css">
    html,
    body {
        width: 100%;
    }

    #music {
        padding: 50px 0;
        text-align: center;
    }

    #music img {
        border-redius: 100px;
        width: 200px;
        height: 200px;
    }

    #title {
        text-align: center;
    }
    </style>
</head>

<body>
    <div class="aui-content">
        <header id="aui-header" class="aui-bar aui-bar-nav aui-bar-danger">
            <a class="aui-pull-left">
                <span class="aui-iconfont aui-icon-left"></span>
            </a>
            <div id="header-title" class="aui-title">广场舞黑马4</div>
        </header>
    </div>
    <div id="music">
        <img src="../image/music.png" />
    </div>
    <h5 id="title"></h5>
    <div class="aui-range" style="margin-top:30px;">
        <input type="range" class="aui-range-danger" value="0" max="100" min="1" step="1" id="range" />
    </div>
    <div class="aui-btn aui-btn-primary aui-btn-block" id="btnStart">播放(start)</div>
    <br />
    <div class="aui-btn aui-btn-danger aui-btn-block" id="btnStop">停止(stop)</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui.js"></script>
<script type="text/javascript" src="../script/aui-range.js"></script>
<script type="text/javascript" src="../script/jQuery.js"></script>
<script type="text/javascript" src="../script/jQueryRotate.js"></script>
<script type="text/javascript">
//播放音乐的方法
function fnStart(){
    var netAudio = api.require('netAudio');
    //从传输的参数中获取
    var url = api.pageParam.url;
    //在播放时，加载并显示音乐名称和歌手名称
    var songName = api.pageParam.songName;
    var singer = api.pageParam.singer;
    //写入页面
    $api.text($api.byId('title'),songName+'——'+singer);
    netAudio.play({
        path: url
    }, function(ret, err) {
        if (ret) {
            // alert(JSON.stringify(ret));
            //滑块百分比滑动
            $api.byId('range').value = ret.current / ret.duration * 100;
        } else {
            // alert(JSON.stringify(err));
            alert('网络问题，请稍后再试');
        }
    });
}
//停止音乐方法
function fnStop(){
    var netAudio = api.require('netAudio');
    netAudio.pause();
}
//通过滑块进度来确定播放位置
function fnStartProcess(){
    //滑动到位置播放
    $aui.range($api.byId('range'), function(ret) {
        var netAudio = api.require('netAudio');
        netAudio.setProgress({
            progress: ret
        });
    });
}
//旋转初始值
var angle = 0;
var timer;
//定义光盘旋转方法
function fnRotate(){
    // //清除定时器
    clearInterval(timer);
    timer = setInterval(function() {
        angle+=3;
        $("#music img").rotate(angle);
    }, 50);
}
apiready = function() {
    //调用播放音乐方法
    fnStart();
    //滑动播放
    fnStartProcess();
    //调用光盘旋转方法
    fnRotate();
    //定义播放和停止按钮
    //注意没有括号
    $api.byId('btnStart').onclick = fnStart;
    $api.byId('btnStop').onclick = fnStop;

};
</script>
